<template style="margin:0">
    <el-container style="height: 100vh;">
        <el-aside width="200px" style="background-color: #001529;height:100%;">
            <div class="block">
                <div class="flex">
                    <el-avatar :src="circleUrl" size="large"></el-avatar>
                    <div v-text="name" class="name"></div>
                </div>
                <el-button type="text" style="color:#eee;" @click="quit">退出</el-button>
                <!-- <el-dialog title="提示" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
                    <span>是否退出登录</span>
                    <span slot="footer" class="dialog-footer">
                        <el-button @click="dialogVisible = false">取 消</el-button>
                        <el-button type="primary" @click="quit">确 定</el-button>
                    </span>
                </el-dialog> -->
            </div>
            <el-menu router background-color="#001529" text-color="#A6AAAE" active-text-color="#fff">
                <el-submenu v-for="(item, index) in $router.options.routers" :index="index + ''" :key="index">
                    <template slot="title"><i class="el-icon-eleme"></i>{{ item.name }}</template>
                    <el-menu-item v-for="(item2, index2) in item.children" :index="item2.path" :key="index2"
                        :class="$route.path == item2.path ? 'is-active' : ''">{{ item2.name }}</el-menu-item>
                </el-submenu>
            </el-menu>
        </el-aside>
        <el-container>
            <el-main>
                <router-view></router-view>
            </el-main>
        </el-container>
    </el-container>
</template>
<script>
export default {
    data() {
        return {
            circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
            name: "新用户",
            dialogVisible: false,
        }
    },
    methods: {
        handleClose(done) {
            done();
        },
        quit() {
            localStorage.removeItem('token')
            this.$router.push({ path: '/' });
        }
    }
}
</script>
<style lang="less" scoped>
* {
    margin: 0;
    padding: 0;
}

body {
    margin: 0 !important;
}

.el-header {
    background-color: #b3c0d1;
    color: #333;
    line-height: 60px;

    .el-aside {
        color: #333;
    }
}

.block {
    display: flex;
    align-items: center;
    padding: 20px 10px;
    justify-content: space-around;
}

.flex {
    display: flex;
    align-items: center;

    .name {
        margin-left: 10px;
        font-size: 15px;
        color: #fff;
    }
}

.dialog-footer {
    .el-button {
        padding: 10px 20px;
    }
}
</style>